<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="./js/vue.js"></script>
</head>
<body>

 <div id="app">
     总价格:{{totalPrice}}
 </div>

 <script>
     let vm = new Vue({
         el: "#app",
         data:{
             books:[
                 {id:1,name:'操作系统',price: 50},
                 {id:2,name:'数据库',price: 64},
                 {id:3,name:'java',price: 53},
                 {id:4,name:'数据结构',price: 98}
            ]
         },
         computed:{
             totalPrice: function () {
                 let result = 0;
                 this.books.forEach(function (book) {
                     result += book.price;
                 });
                 return result;
             }
         }
     })
 </script>
</body>

</html>